<template>
    <!-- 搜索 -->
    <div class="search banxin">
        <div class="search_in">
            <div class="search tanxin">
                <input type="text" v-model="value" @keyup.enter="keyupFn">
                <span class="search_btn" @click="keyupFn"></span>
            </div>
            <div class="note">
                <div v-show="isShow==1">搜索“{{ value }}”，找到<em>{{ songs.length }}</em>首单曲</div>
                <div v-show="isShow==2">搜索“{{ value }}”，找到<em>{{ artists.length }}</em>个歌手</div>
                <div v-show="isShow==3">搜索“{{ value }}”，找到<em>{{ albums.length }}</em>张专辑</div>
                <div v-show="isShow==4">搜索“{{ value }}”，找到<em>{{ playlists.length }}</em>个视频</div>
                <div v-show="isShow==5">搜索“{{ value }}”，找到<em>{{ playlists.length }}</em>个歌单</div>
                <div v-show="isShow==6">搜索“{{ value }}”，找到<em>{{ djRadios.length }}</em>个节目</div>
                <div v-show="isShow==7">搜索“{{ value }}”，找到<em>{{ users.length }}</em>个用户</div>
            </div>
            <div class="select">
                <ul>
                    <li @click="goSingle" :class="{'active': $route.path.includes('single')}">单曲</li>
                    <li @click="goArtists" :class="{'active': $route.path.includes('artists')}">歌手</li>
                    <li @click="goAlbums" :class="{'active': $route.path.includes('albums')}">专辑</li>
                    <li @click="goVideos" :class="{'active': $route.path.includes('videos')}">视频</li>
                    <li @click="goPlaylists" :class="{'active': $route.path.includes('playlists')}">歌单</li>
                    <li @click="goDjRadios" :class="{'active': $route.path.includes('djradios')}">声音主播</li>
                    <li @click="goUsers" :class="{'active': $route.path.includes('users')}">用户</li>
                </ul>
            </div>
            <router-view />
        </div>
    </div>
</template>

<script>
import { SingleSearchApi, ArtistSearchApi, AlbumSearchApi, VideoSearchApi, PlaylistSearchApi, DjRadioSearchApi, UserSearchApi } from "@/request/api";
export default {
    data () {
        return {
            // 输入框的值
            value: this.$route.params.keyword,
            isShow: 1,
            songs: [],
            artists: [],
            albums: [],
            videos: [],
            playlists: [],
            djRadios: [],
            users: [],
        }
    },
    computed: {
        keyword() {
            return this.$route.params.keyword;
        }
    },
    created() {
        SingleSearchApi(this.keyword).then((res) => {
            // console.log(res);
            if(res.data.code === 200 ){
                let obj = { content: "搜索成功！", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
                this.songs = res.data.result.songs;
            }else{
                let obj = { content: "搜索失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
            }
        });
        ArtistSearchApi(this.keyword).then((res) => {
            // console.log(res);
            if(res.data.code === 200 ){
                let obj = { content: "搜索成功！", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
                this.artists = res.data.result.artists;
            }else{
                let obj = { content: "搜索失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
            }
        });
        AlbumSearchApi(this.keyword).then((res) => {
            // console.log(res);
            if(res.data.code === 200 ){
                let obj = { content: "搜索成功！", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
                this.albums = res.data.result.albums;
            }else{
                let obj = { content: "搜索失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
            }
        });
        VideoSearchApi(this.keyword).then((res) => {
            // console.log(res);
            if(res.data.code === 200 ){
                let obj = { content: "搜索成功！", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
                this.videos = res.data.result.videos;
            }else{
                let obj = { content: "搜索失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
            }
        });
        PlaylistSearchApi(this.keyword).then((res) => {
            // console.log(res);
            if(res.data.code === 200 ){
                let obj = { content: "搜索成功！", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
                this.playlists = res.data.result.playlists;
            }else{
                let obj = { content: "搜索失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
            }
        });
        DjRadioSearchApi(this.keyword).then((res) => {
            // console.log(res);
            if(res.data.code === 200 ){
                let obj = { content: "搜索成功！", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
                this.djRadios = res.data.result.djRadios;
            }else{
                let obj = { content: "搜索失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
            }
        });
        UserSearchApi(this.keyword).then((res) => {
            // console.log(res);
            if(res.data.code === 200 ){
                let obj = { content: "搜索成功！", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
                this.users = res.data.result.userprofiles;
            }else{
                let obj = { content: "搜索失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
            }
        });
    },
    methods: {
        keyupFn() {
            this.$router.push(`/search/${this.value}`)
            this.$router.go(0);
        },
        goSingle() {
            let keyword = this.$route.params.keyword
            this.$router.push(`/search/${keyword}/single`)
            this.isShow = 1
        },
        goArtists() {
            let keyword = this.$route.params.keyword
            this.$router.push(`/search/${keyword}/artists`)
            this.isShow = 2
        },
        goAlbums() {
            let keyword = this.$route.params.keyword
            this.$router.push(`/search/${keyword}/albums`)
            this.isShow = 3
        },
        goVideos() {
            let keyword = this.$route.params.keyword
            this.$router.push(`/search/${keyword}/videos`)
            this.isShow = 4
        },
        goPlaylists() {
            let keyword = this.$route.params.keyword
            this.$router.push(`/search/${keyword}/playlists`)
            this.isShow = 5
        },
        goDjRadios() {
            let keyword = this.$route.params.keyword
            this.$router.push(`/search/${keyword}/djradios`)
            this.isShow = 6
        },
        goUsers() {
            let keyword = this.$route.params.keyword
            this.$router.push(`/search/${keyword}/users`)
            this.isShow = 7
        },
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.search_in{
    margin: 0 auto;
    width: 920px;
    border: 1px solid #d3d3d3;
    border-top: none;
    border-bottom: none;
    background-color: #fff;
    padding: 40px;
    padding-bottom: 60px;
    .search {
        margin: 0 auto;
        width: 420px;
        height: 40px;
        background: url("../assets/images/public/sprite.png") no-repeat;
        background-position: 0 0;
        input {
            width: 330px;
            height: 17px;
            margin: 12px 0 0 20px;
            padding: 0;
            background: #fff;
            border: none;
            font-size: 14px;
            color: #333;
        }
        .search_btn {
            width: 50px;
            height: 40px;
            &:hover {
                cursor: pointer;
                width: 50px;
                height: 40px;
                background: url("../assets/images/public/sprite.png") no-repeat;
                background-position: -430px 0;
            }
        }
    }
    .note {
        margin: 28px 0 17px;
        font-size: 14px;
        color: #999;
        em {
            color: @red;
            margin: 0 5px;
        }
    }
    .select {
        margin-bottom: 20px;
        ul {
            height: 40px;
            display: flex;
            border: 1px solid #D7D7D7;
            li {
                flex: 1;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-right: 1px solid #D7D7D7;
                &:last-of-type {
                    border-right: none;
                }
                &:hover {
                    cursor: pointer;
                    border-bottom: 2px solid @red;
                }
            }
            .active {
                border-bottom: 2px solid @red;
            }
        }
    }
}
</style>